$(function () {

  render()

  // 1. 给input绑定键盘按下事件(keydown keypress)
  $('#title').keydown(function (event) {
    console.log(event.keyCode)
    // 2. 获取事件对象, 判断keyCode是否为13
    if (event.keyCode === 13 && $(this).val().trim().length > 0) {
      // 从localStorage中获取数据
      var arr = getData()
      // console.log(arr)
      // arr.push()

      // 4. 获取用户输入的数据
      // console.log($(this).val())
      // 5. 将数据包装成对象, 并加入从localStorage获取的数组
      // 数据格式: { title: 'xxx', done: false }
      arr.push({ title: $(this).val(), done: false })
      // 6. 将数组写回localStorage中
      setData(arr)

      // 羞耻
      // location.reload()
      render()

      // 文本框清空
      $(this).val('')
    }
  })

  // 12. 给a标签绑定事件(由于a标签是动态生成的, 所以需要用事件代理)
  $('ol, ul').on('click', 'a', function () {
    // console.log('a被点击了!')
    // 删除localStorage的数据(根据索引)
    // 13. 获取localStorage的数据
    var datas = getData()

    // 15. 点击时获取当前a标签的自定义属性: data-index, 代表了数据的索引
    var index = $(this).data('index')

    // console.log(index)
    // 16. 根据索引删除数据
    // datas.slice()
    datas.splice(index, 1)

    // 17. 重新保存到localStorage
    setData(datas)

    // 18. 重新渲染
    render()

  })

  // 点击CheckBox切换状态,将状态设置到localStorage中 并渲染页面
  $('ol, ul').on('click', 'input', function () {
    // console.log('我被点了')
    // 19. 获取数据
    var datas = getData()

    // 20. 根据索引修改状态
    var index = $(this).siblings('a').data('index')
    // console.log(index)
    datas[index].done = $(this).prop('checked')
    // console.log(datas)

    // 21. 存回localStorage
    setData(datas)

    // 22. 重新渲染
    render()
  })

  function setData(data) {
    // 7. 将数组转换为字符串后存储, 如果传入的数组为null或undefined等非法数据, 则使用默认值 []
    localStorage.setItem('todolist', JSON.stringify(data || []))
  }

  function getData() {
    // 3. 获取localStorage的数据
    // 3.1 键为todolist的数据获取出来
    var todolist = localStorage.getItem('todolist')

    // || 断位或  断位与
    // 把字符串转成对象/数组
    return JSON.parse(todolist || '[]')

    // console.log(todolist)

    // var arr = null

    // 判断localStorage中是否有数据, 如果没有 生成一个空数组并返回
    // if (todolist) {
    //   // 3.2 将字符串转换为对象
    //   arr = JSON.parse(todolist)
    // } else {
    //   arr = []
    // }

    // return arr
  }

  // render渲染
  function render() {
    // 根据localStorage的数据渲染ol中的li, localStorage中有几条数据, 页面就应该有几个li
    // 8. 获取localStorage中的数据
    var datas = getData()

    // 12. 在添加数据之前 清空ol中所有的li
    $('ol, ul').empty()

    // 2个计数器-用于累加已完成的任务个数和未完成的任务个数
    var todoCount = 0
    var doneCount = 0

    // 9. 遍历所有数据
    $.each(datas, function (index, item) {
      console.log(index, item)
      // 23. 渲染时需要根据done的状态 决定添加到ol还是ul
      if (item.done) {
        // 勾选了, 加到ul, 已完成的
        var li = $('<li> <input type="checkbox" checked="checked" /> <p>' + item.title + '</p> <a data-index="' + index + '" href="javascript:;"></a> </li>')
        // 11. 将新创建的li加入页面的ul中
        $('ul').prepend(li)
        doneCount ++
      } else {
        // 没勾选, 加到ol, 未完成的
        // 10. 创建li元素及其子元素,并设置数据
        // 14. 在遍历时需要加上自定义索引, 便于后面删除使用
        var li = $('<li> <input type="checkbox" /> <p>' + item.title + '</p> <a data-index="' + index + '" href="javascript:;"></a> </li>')
        // 11. 将新创建的li加入页面的ol中
        $('ol').prepend(li)
        todoCount ++
      }

      // console.log(todoCount, doneCount)
      $('#todocount').text(todoCount)
      $('#donecount').text(doneCount)

    })

  }

})